<template>
  <div class="app-container">
    <!-- 页头 -->
    <header class="header">
      <div class="adv"></div>
      <div class="header-content">
        <!-- 功能栏 -->
        <HeaderTopNav />
        <!-- 导航栏 -->
        <HeaderBreedNav />
        <!-- 价格轮播 -->
        <HeaderPriceList />
        <!-- 广告栏 -->
        <div class="advB"></div>
      </div>
      <div class="adv"></div>
    </header>
    <!-- 主内容区（插槽） -->
    <main class="main">
      <div class="main-content">
        <slot /> <!-- 页面内容将在这里渲染 -->
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
      <p>© 2024 郑州华粮科技有限公司. 保留所有权利.</p>
    </footer>
  </div>
</template>
  
<style  lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保布局占满整个视口高度 */
}
 
.header {
  text-align: center;
  display: flex;
  justify-content: space-around;
  .adv{
    width: 184px;
    height: 341px;
    border-radius: 8px;
    background-color: #1A52A5;
  }
  .header-content {
    width: 66%;
    // background-color: #1870c2;
    display: flex;
    flex-direction: column;
    .Top_Nav{
      width: 100%;
      height: 41px;
      background-color: #FAFAFA;
    }
    .breed_Nav{
      width: 100%;
      flex: 1;
      background-color: #fff;
    }
    .PriceList{
      width: 100%;
      height: 74px;
      background-color: #FAFAFA;
    }
    .advB{
      width: 100%;
      height: 80px;
      background-color: #1A52A5;
    }
  }
}

.header nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}
 
.main {
  flex: 1; /* 主内容区自动填充剩余空间 */
  display: flex;
  justify-content: space-around;
  .main-content{
    width: 66%;
    // background-color: #8f8f8f;
  }
}
 
.footer {
  width: 66%;
  height: 151px;
  margin: auto;
  background-color: #1a52a5;
  color: white;
  text-align: center;
  // padding: 1rem;
}
</style>